<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>position</title>
	<style>
		.box{
			width: 300px;
			height: 300px;
			background: red;
			margin-top:50px;
		}
		.box:nth-child(1){
			margin: 0 auto;
		}
		.box:nth-child(2) .box1{
			width: 100px;
			height: 100px;
			background: yellow;
			/**
			 直接设置子元素的margin值无法改变子元素的上边距
			 因为父元素的边界没有做限制
			 */
			margin:50px auto;
		}
		.box:nth-child(2){
			padding: 2px;    /*通过内边距限制父元素的边界*/
			/*border: 1px solid;*/   /* 通过边框限制父元素的边界 */
			/*overflow: hidden;*/	/* 通过限制溢出来限定父元素的边界 */
		}
		.box:nth-child(3){
			position: relative;
		}
		/*
		通过绝对定位来设置水平和垂直居中
		*/
		.box2{
			background: yellow;
			position: absolute;
			width: 50%;
			height: 50%;
			overflow: hidden;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
		/*绝对定位的偏移*/
		.box3{
			width: 100px;
			height: 100px;
			background: yellow;
			position: absolute;
			left: 50%;/*父元素宽度的一半*/
			margin-left: -50px;/*自身宽度的一半*/
			top:50%;
			margin-top: -50px;
		}
		.box:nth-child(4){
			position: relative;/*设置父元素定位方式为相对定位*/
		}
		.box:nth-child(5){
			border: 1px solid;
		}
		/*相对定位的偏移*/
		.box4{
			width: 100px;
			height: 100px;
			background: yellow;
			position: relative;
			left: 50%;/*父元素宽度的一半*/
			margin-left: -50px;/*自身宽度的一半*/
			top:50%;
			margin-top: -50px;
		}
		.btn{
			width: 80px;
			height: 30px;
			background: #f7ca44;
			margin: 50px auto;
			text-align: center;
			line-height: 30px;/* 和自身的高度一致 */
		}
		.box5{
			width: 100px;
			height: 100px;
			border-radius: 50%;/* 弧度为50% */
			background: yellow;
		}
	</style>
</head>
<body>
<div class="box">

</div>
<div class="box">
	<div class="box1"></div>
</div>
<div class="box">
	<div class="box2"></div>
</div>
<div class="box">
	<div class="box3"></div>
</div>
<div class="box">
	<div class="box4"></div>
</div>

<div class="btn">
	登录
</div>


<div class="box5">

</div>
</body>
</html>